<!DOCTYPE HTML>
<html>
<head>
    <!--<title>继电器设置</title>-->
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <!--<link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet" type="text/css"/>-->
    <!--<link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet" type="text/css"/>-->
    <!--<script type="text/javascript" src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>-->
    <!--<script type="text/javascript" src="../../resources/lib/bui/js/bui-min.js"></script>-->
</head>
<body>
<div class="row">
<div class="span4">
    <div id="door_list">
    </div>
</div>
<div class="span16">
<div id="door_tab"></div>
<div id="door_panel" class="bordered" style="padding:10px;">
    <div><!-- 继电器 -->
        <form id="door_delay_form" action="" class="form-horizontal">
            <div class="row">
                <div class="span7">
                    <fieldset>
                        <legend>基本设置</legend>
                        <div class="control-group">
                            <label class="control-label" style="width: 60px"><s>*</s>名称：</label>

                            <div class="controls">
                                <input name="name" type="text" class="input-small" data-rules="{required : true}">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" style="width: 60px">模式</label>
                            <div class="controls">
                                <select class="input-small">
                                    <option>常开</option>
                                    <option>常闭</option>
                                    <option>定时</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <div class="span8">
                    <fieldset>
                        <legend>时间规则</legend>
                        <div class="control-group">
                            <label class="control-label">合闸</label>
                            <div class="controls">
                                <select class="input-small">
                                    <option>永远有效</option>
                                    <option>永远无效</option>
                                    <option>时间组1</option>
                                    <option>时间组2</option>
                                    <option>时间组3</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">禁用</label>
                            <div class="controls">
                                <select class="input-small">
                                    <option>永远有效</option>
                                    <option>永远无效</option>
                                    <option>时间组1</option>
                                    <option>时间组2</option>
                                    <option>时间组3</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">自动复归</label>
                            <div class="controls">
                                <select class="input-small">
                                    <option>永远有效</option>
                                    <option>永远无效</option>
                                    <option>时间组1</option>
                                    <option>时间组2</option>
                                    <option>时间组3</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
                <div class="form-actions pull-right">
                    <button type="submit" class="button button-primary">保存</button>
                    <button type="reset" class="button">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
</div>
<!--<script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201308062006"></script>-->
<script type="text/javascript">
    var List = BUI.List;
    var items = [
                {text:'继电器1',value:'1'},
                {text:'继电器2',value:'2'},
                {text:'继电器3',value:'3'},
                {text:"继电器4",value:4}
            ],
            list = new List.SimpleList({
                elCls:'bui-select-list',//默认是'bui-simple-list'
                width:'100%',
                render : '#door_list',
                items : items
            });
    list.render();
    list.on('selectedchange', function(){
        alert(list.getSelectedText() + '：' + list.getSelectedValue());
    });

    var Tab = BUI.Tab
    var doorTab = new Tab.TabPanel({
        render: '#door_tab',
        elCls: 'nav-tabs',
        panelContainer: '#door_panel',
        autoRender: true,
        children: [
            {text: '继电器'}
        ]
    });
    doorTab.setSelected(doorTab.getItemAt(0));

    var Form = BUI.Form;
    new Form.Form({
        srcNode: '#door_delay_form'
    }).render();
</script>
</body>
</html>
